<template>
  <div class="login-container">
    <el-form
      ref="form"
      :model="form"
      class="login-form-wrap"
      :rules='rules'
    >
      <!-- logo -->
      <div class="login-head">
        <div class="logo"></div>
      </div>
      <el-form-item prop='mobile'>
        <el-input v-model="form.mobile" placeholder='请输入手机号'></el-input>
      </el-form-item>
      <el-form-item prop='code'>
        <el-input v-model="form.code" placeholder="请输入验证码"></el-input>
      </el-form-item>


    <!-- 表单域 model 字段，在使用 validate、resetFields 方法的情况下，该属性是必填的 -->
      <el-form-item prop='agree'>
        
          <el-checkbox label="我已阅读并同意用户协议和隐私条款" v-model="form.agree"></el-checkbox>
       
      </el-form-item>

      <el-form-item>
        <el-button class="login-btn" type="primary" @click="onSubmit">登录</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>

import {postLogin} from '@/api/user.js'
import {SetToken} from '@/utils/storage.js'
export default {
  name:'Login',
  data() {
    const validatePass=(rule,value,callback)=>{
      if(!value){
        callback(new Error('请勾选同意'))
      }else{
        callback()
      }
    }
    return {
      form: {
       mobile:'13911111111',
       code:'246810',
       agree:false
      },
      rules:{
        // { required: true, message: '请输入手机号', trigger: ['blur', 'change'] },
          // trigger:规定触发的时机=> 2重状态 =>容器保存=>数组 or 对象
          // { min: 3, max: 5, message: '请输入正确的手机格式', trigger: ['blur', 'change'] }
        mobile:[
          {
            required:true,
            message:'请输入手机号',
            trigger:['blur','change']
          },
           {
            patten:/^1[3-9]\d{9}$/,
            message:'请输入正确的手机号',
            trigger:['blur','change']
          }
        ],
        code:[
          {
             required:true,
            message:'请输入验证码',
            trigger:['blur','change']
          },
          {
             patten:/^\d{6}$/,
            message:'请输入正确的验证码',
            trigger:['blur','change']
          }
        ],
        agree:[{
          validator: validatePass, trigger: ['blur','change']
        }]
      }
    };
  },
  methods: {
  async onSubmit() {
 //验证
 try{
   await this.$refs.form.validate()
 } catch(error){
   //catch中的return不要忘记
   return console.log('fail!!!!!');
 }    


 //请求
 try{
   //通过,登入请求
   const res = await postLogin(this.form.mobile,this.form.code)
   //res返回结果=>res.data.data.token=>TODO
  //  console.log(res);
   //token：保存的目的=》好多需要权限的请求headers
   SetToken(res.data.data.token)

   this.$message.success('登入成功')
   this.$router.push('/')
   }catch(error){
     //promise的reject的结果无法操作
     this.$message.error('requestfail')}
   }
  },
}
</script>

<style lang="less">
// 铺满整屏
.login-container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: url("~@/assets/login_bg.jpg") no-repeat;
  background-size: cover;
  .login-form-wrap {
    width: 400px;
    min-width: 300px;
    padding: 30px 50px 10px;
    background-color: #fff;
    .login-head {
      display: flex;
      justify-content: center;
      .logo {
        width: 200px;
        height: 57px;
        background: url("~@/assets/logo_index.png") no-repeat;
        background-size: contain;
      }
    }
    .login-form {
      .login-btn {
        width: 100%;
      }
    }
  }
}
</style>
